<!--
 - Author : chend.
 - 锚点批量维护
 -->
<template>
  <div class="batchManageBox">
    <div class="batchManageWrap">
      <div class="batchManage">

        <!-- 搜索 -->
        <div class="searchForm">
          <ul class="searchUl">
            <li class="searchLi">
              <span class="searchLabel">道路：</span>
              <el-input v-model="areaWayName" placeholder="请输入关键字"></el-input>
            </li>
            <li class="searchLi">
              <span class="searchLabel">街道/乡/镇：</span>
              <el-input v-model="areaTownName" placeholder="请输入关键字"></el-input>
            </li>
            <li class="searchLi">
              <span class="searchLabel width60">区/县：</span>
              <el-input v-model="areaCountyName" placeholder="请输入关键字"></el-input>
            </li>
            <li class="searchLi">
              <span class="searchLabel width40">市：</span>
              <el-input v-model="areaCityName" placeholder="请输入关键字"></el-input>
            </li>
            <li class="searchLi newBlock">
              <span class="searchLabel">创建人：</span>
              <el-input v-model="creator" placeholder="请输入内容"></el-input>
            </li>
            <li class="searchLi timeSelect">
              <span class="searchLabel">创建时间：</span>
              <el-date-picker
                placeholder="开始时间"
                class="createTime"
                v-model="createBeginDate"
                type="date"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd"
                :clearable="false"
                align="right">
              </el-date-picker>
              <span class="timeSelectLabel">至</span>
              <el-date-picker
                placeholder="结束时间"
                class="createTime"
                v-model="createEndDate"
                type="date"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd"
                :clearable="false"
                align="right">
              </el-date-picker>
            </li>
            <li class="searchLi newBlock width100">
              <span class="searchLabel">锚点类型：</span>
              <el-select v-model="markerType" placeholder="请选择">
                <el-option
                  label="2D"
                  value="2d">
                </el-option>
                <el-option
                  label="3D"
                  value="3d">
                </el-option>
                <el-option
                  label="2D 3D"
                  value="all">
                </el-option>
              </el-select>
            </li>
            <li class="searchLi">
              <span class="searchLabel width110">锚点元素名称：</span>
              <el-select v-model="anchorTypeId" placeholder="请选择">
                <el-option
                  v-for="(anchorTypeItem, index) in anchorTypeList"
                  :key="index"
                  :label="anchorTypeItem.anchorTypeName"
                  :value="anchorTypeItem.anchorTypeId">
                </el-option>
              </el-select>
            </li>
            <li class="searchLi">
              <span class="searchLabel">比例尺：</span>
              <el-select v-model="mapScale" placeholder="请选择">
                <el-option
                  v-for="bili in mapScaleArr"
                  :key="bili.sort"
                  :label="bili.detailName"
                  :value="bili.detailCode">
                </el-option>
              </el-select>
            </li>
            <li class="searchLi">
              <div class="btn-group">
                <el-button class="left" size="medium" @click="anchorListSearch" round>搜索</el-button>
                <el-button class="right" size="medium" @click="resetSearch" round>重置</el-button>
              </div>
            </li>
          </ul>
        </div>
        
        <!-- 批量处理 -->
        <div class="btn-group addMarkers">
          <el-button class="left" size="medium" icon="el-icon-plus" @click="showBatchAddPop" round>批量添加锚点</el-button>
          <el-button class="right" size="medium" @click="addMarkerFn" icon="el-icon-plus" round>添加锚点</el-button>
          <input type="file" class="hideMe" ref="uploadModel" accept="*/*" @change="uploadModel">
        </div>
        
        <!-- 锚点表单 -->
        <div class="markersformData">
          <div class="tableWrap">
            <el-table
              v-loading="loadingMarkersTable"
              ref="markersTable"
              @selection-change="handleSelectionChange"
              :data="markserList"
              stripe
              style="width: 100%">
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>
              <el-table-column
                prop="anchorName"
                align="left"
                label="锚点名称"
                width="150">
              </el-table-column>
              <el-table-column
                prop="anchorStatusType"
                align="center"
                label="锚点类型"
                width="180">
              </el-table-column>
              <el-table-column
                prop="anchorTypeName"
                align="center"
                label="锚点元素名称">
              </el-table-column>
              <el-table-column
                prop="mapScale"
                align="center"
                label="比例尺">
              </el-table-column>
              <el-table-column
                prop="creator"
                align="center"
                label="创建人">
              </el-table-column>
              <el-table-column
                prop="createTime"
                align="center"
                label="创建时间">
              </el-table-column>
              <el-table-column
                align="center"
                label="操作">
                <template slot-scope="scope">
                  <el-button type="text" class="addShu" size="small" @click="editBox(scope.row)">编辑</el-button>
                  <el-button type="text" size="small" @click="deleteBox(scope.row)">删除</el-button>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="anchorStatus"
                label="关联">
                <template slot-scope="scope">
                  <el-button type="text" class="addShu" size="small" v-if="scope.row.relationUrl" @click="linkVideo(scope.row)">关联</el-button>
                  <el-button type="text" size="small" @click="previewVideo(scope.row)">预览</el-button>
                </template>
              </el-table-column>
              <el-table-column>
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="detailBox(scope.row)">查看详情</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="tableSelectAll">
              <el-checkbox v-model="checkedAll">
                <span class="selectAllBtn">全选</span>
              </el-checkbox>
              <span class="deleteBtn" @click="deleteAll">删除</span>
            </div>
          </div>
          
          <div class="paginationWrap">
            <div class="paginationWrapPageSize">
              每页显示
              <input type="text" placeholder="20" v-model="pageSize">
              条
            </div>
            <el-pagination
              class="pageBotton"
              @current-change="handleCurrentChange"
              :page-size="parseInt(pageSize)"
              :current-page="currentPage"
              layout="prev, pager, next, jumper"
              :total="totalCount">
            </el-pagination>
          </div>
        </div>

        <!-- 编辑锚点模态窗 -->
        <div class="msgBoxWrapBox" v-if="editPop">
          <div class="msgBoxWrapBg"></div>
          <div class="msgBoxWrap">
            <p class="msgBoxTitle">
              {{popType === 'edit' ? '编辑锚点' : '添加锚点'}}
            </p>
            <div class="msgBoxContent">
              <ul>
                <li class="editDataLi">
                  <span class="editLabel" :class="{'requiredLabel' : popType === 'add'}">锚点元素名称：</span>
                  <el-select
                    v-model="editData.anchorTypeId"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请输入锚点元素关键字快速选择"
                    :remote-method="searchAnchorTypeSearch">
                    <el-option
                      v-for="(anchorTypeItem, index) in editPopAnchorTypeList"
                      :key="index"
                      :label="anchorTypeItem.anchorTypeName"
                      :value="anchorTypeItem.anchorTypeId">
                    </el-option>
                  </el-select>
                </li>
                <li class="editDataLi">
                  <span class="editLabel" :class="{'requiredLabel' : popType === 'add'}">名称：</span>
                  <el-input v-model="editData.anchorName" placeholder="名称"></el-input>
                </li>
                <li class="editDataLi">
                  <span class="editLabel">备注：</span>
                  <el-input type="textarea"  :autosize="{ minRows: 4, maxRows: 6}" v-model="editData.anchorDesc"></el-input>
                </li>
                <li class="editDataLi">
                  <span :class="['editLabel', popType === 'add' ? 'requiredLabel' : '', (editData.isMapModel3d === 'T') ? 'editPositionLabel3d' : 'editPositionLabel']">锚点坐标值：</span>
                  <div class="editPosition">
                    <div class="editPositionBlock">
                      <span class="editLabelx">X：</span>
                      <el-input v-model="editData.longitude" placeholder="经度"></el-input>
                    </div>
                    <div class="editPositionBlock">
                      <span class="editLabely">Y：</span>
                      <el-input v-model="editData.latitude" placeholder="纬度"></el-input>
                    </div>
                    <div class="editPositionBlock" v-if="editData.isMapModel3d === 'T'">
                      <span class="editLabely">Y：</span>
                      <el-input v-model="editData.latitude" placeholder="纬度"></el-input>
                    </div>
                  </div>
                </li>
                <li class="editDataLi">
                  <div class="editAddressBlock" v-if="mapSource.areaLevel==='01'">
                    <span class="editLabel" :class="{'requiredLabel' : popType === 'add'}">市</span>
                    <el-select
                      v-model="editData.areaCityId"
                      filterable
                      remote
                      reserve-keyword
                      placeholder="请输入关键词"
                      :loading="isLoadingSearch"
                      @change="changeCity"
                      :remote-method="searchCityFn">
                      <el-option
                        v-for="item in areaCityNameList"
                        :key="item.cityId"
                        :label="item.cn"
                        :value="item.cityId">
                      </el-option>
                    </el-select>
                  </div>
                  <div class="editAddressBlock" v-if="mapSource.areaLevel!=='03'" :class="{'editAddressBlockWidth100': mapSource.areaLevel==='02'}">
                    <span class="editLabel" :class="{'editRight': mapSource.areaLevel!=='02', 'requiredLabel' : popType === 'add'}">区/县</span>
                    <el-select
                      v-model="editData.areaCountyId"
                      filterable
                      remote
                      reserve-keyword
                      placeholder="区/县"
                      :loading="isLoadingSearch"
                      @change="changeCountry"
                      :remote-method="searchCountyFn">
                      <el-option
                        v-for="item in areaCountyNameList"
                        :key="'districtId'+item.districtId"
                        :label="item.cn"
                        :value="item.districtId">
                      </el-option>
                    </el-select>
                  </div>
                  <div class="editAddressBlock">
                    <span class="editLabel" :class="{'requiredLabel' : popType === 'add'}">街道/乡/镇</span>
                    <el-select
                      v-model="editData.areaTownId"
                      filterable
                      remote
                      reserve-keyword
                      placeholder="街道/乡/镇"
                      :loading="isLoadingSearch"
                      @change="changeStreet"
                      :remote-method="searchStreetFn">
                      <el-option
                        v-for="item in areaTownNameList"
                        :key="'streetId'+item.streetId"
                        :label="item.cn"
                        :value="item.streetId">
                      </el-option>
                    </el-select>
                  </div>
                  <div class="editAddressBlock">
                    <span class="editLabel editRight" :class="{'requiredLabel' : popType === 'add'}">道路</span>
                    <el-select
                      v-model="editData.areaWayId"
                      filterable
                      remote
                      reserve-keyword
                      placeholder="道路"
                      :loading="isLoadingSearch"
                      :remote-method="searchRoadFn">
                      <el-option
                        v-for="item in areaWayNameList"
                        :key="'roadId'+item.roadId"
                        :label="item.roadName"
                        :value="item.roadId">
                      </el-option>
                    </el-select>
                  </div>
                </li>
                <li class="editDataLi biliWrap">
                  <span class="editLabel" :class="{'requiredLabel' : popType === 'add'}">当前锚点默认地图比例尺：</span>
                  <el-select v-model="editData.mapScale" placeholder="请选择">
                    <el-option
                      v-for="bili in mapScaleArr"
                      :key="'editData' + bili.sort"
                      :label="bili.detailName"
                      :value="bili.detailCode">
                    </el-option>
                  </el-select>
                </li>
              </ul>
            </div>
            <div class="editBtn">
              <div class="btn-group">
                <el-button class="left" size="medium" @click="editForm" round>确定</el-button>
                <el-button class="right" size="medium" @click="editPop=false" round>取消</el-button>
              </div>
            </div>
          </div>
        </div>

        <!-- 批量添加模态窗 -->
        <el-dialog title="批量添加" :visible.sync="batchAddPop" width="30%">
          <el-button size="medium" icon="el-icon-upload" @click="batchAdd">{{fileName || '点击选择批量添加文件'}}</el-button>
          <i class="checkStatus" v-if="doneCheck" :class="{'checkError el-icon-warning': checkList.length, 'checkSuccess el-icon-circle-check': !checkList.length}"></i>
          <el-button type="primary" class="downloadFileBtn" size="medium">
            <a href="../../../../static/marker.xlsx" class="goDownload" download="锚点导入模板.xlsx">下载模板</a>
          </el-button>
          <div v-show="checkList.length > 0" class="batchAddPopFileName">
            <ul class="batchAddPopUl">
              <li v-for="logo in checkList" class="batchAddPopli">
                第 <em>{{logo.rowNum.replace(/(\,)/g, '、')}}</em> 行记录添加失败，原因为<em>{{logo.err}}</em>
              </li>
            </ul>
            <p class="tipMsg">请修改后再上传</p>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="batchAddPop = false">取 消</el-button>
            <el-button type="primary" :disabled="!fileName" :loading="reqLoading" v-show="!doneCheck || checkList.length" @click="batchCheck">开始校验</el-button>
            <el-button type="primary" @click="batchAddForm" :loading="reqLoading" v-show="doneCheck && !checkList.length">开始添加</el-button>
          </div>
        </el-dialog>

        <!-- 锚点详情模态框 -->
        <div class="msgBoxWrap" v-show="detailPop">
          <p class="msgBoxTitle">
            锚点详情
          </p>
          <div class="msgBoxContent">
            <ul>
              <li class="editDataLi">
                <span class="editLabel">锚点元素名称：</span>
                <span class="showValue">{{markerDetail.anchorTypeName}}</span>
              </li>
              <li class="editDataLi">
                <span class="editLabel">名称：</span>
                <span class="showValue">{{markerDetail.anchorName || '未命名'}}</span>
              </li>
              <li class="editDataLi">
                <span class="editLabel">备注：</span>
                <span class="showValue">{{markerDetail.anchorDesc || '未设置'}}</span>
              </li>
              <li class="editDataLi">
                <span :class="['editLabel', (markerDetail.isMapModel3d === 'T') ? 'editPositionLabel3d' : 'editPositionLabel']">锚点坐标值：</span>
                <div class="editPosition">
                  <div class="editPositionBlock">
                    <span class="editLabelx colorSet">X：</span>
                    <span class="showValue">{{markerDetail.longitude}}</span>
                  </div>
                  <div class="editPositionBlock">
                    <span class="editLabely colorSet">Y：</span>
                    <span class="showValue">{{markerDetail.latitude}}</span>
                  </div>
                  <div class="editPositionBlock" v-if="markerDetail.isMapModel3d === 'T'">
                    <span class="editLabely colorSet">Z：</span>
                    <span class="showValue">{{markerDetail.latitude}}</span>
                  </div>
                </div>
              </li>
              <li class="editDataLi">
                <div class="editAddressBlock">
                  <span class="editLabel">市：</span>
                  <span class="showValue">{{markerDetail.areaCityName || '未设置'}}</span>
                </div>
                <div class="editAddressBlock">
                  <span class="editLabel">区/县</span>
                  <span class="showValue">{{markerDetail.areaCountyName || '未设置'}}</span>
                </div>
                <div class="editAddressBlock">
                  <span class="editLabel">街道/乡/镇：</span>
                  <span class="showValue">{{markerDetail.areaTownName || '未设置'}}</span>
                </div>
                <div class="editAddressBlock">
                  <span class="editLabel">道路：</span>
                  <span class="showValue">{{markerDetail.areaWayName || '未设置'}}</span>
                </div>
              </li>
              <li class="editDataLi" v-if="markerDetail.mapScale">
                <span class="editLabel biliChi">当前锚点默认地图比例尺：</span>
                <span class="showValue">{{markerDetail.mapScale}}:1</span>
              </li>
              <li class="editDataLi">
                <span class="editLabel">创建人：</span>
                <span class="showValue">{{markerDetail.creator}}</span>
              </li>
              <li class="editDataLi">
                <span class="editLabel">创建时间：</span>
                <span class="showValue">{{markerDetail.createTime}}</span>
              </li>
            </ul>
          </div>
          <div class="btnCenter">
            <div class="btn-group">
              <el-button class="left btnCenter" @click="detailPop = false" size="medium" round>确定</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="linkWrap" v-dragable v-show="linkFlag">
      <span class="iconClose" @click="linkFlag=false">
        ×
      </span>
      <iframe class="iframeWrap" :src="iframeSrc" ref="iframeLink" frameborder="0"></iframe>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'batchManage',
    data () {
      return {
        iframeSrc: '',
        linkFlag: false, // 是否显示iframe
        reqLoading: false, // loading显示标记
        doneCheck: false, // 批量添加：是否完成检测
        checkList: [], // 批量添加：检测结果列表
        batchAddPop: false, // 批量添加：是否弹出模态窗
        fileName: '', // 批量添加：模板文件名
        formData: '', // 批量添加: 模板表单数据 file
        popType: 'edit', // 模态窗类型: 添加/编辑 (添加和编辑共用一个模态窗)
        markerDetail: {
        }, // 标注详情
        detailPop: false, // 是否显示 锚点详情 模态窗
        editPop: false, // 是否显示 添加/编辑 模态窗
        totalCount: 10, // 锚点列表：总数据量
        loadingMarkersTable: false, // 锚点列表：表单加载loading显示标记
        /**
         * 锚点编辑 数据
         * @type {Object}
         */
        editData: {
          anchorTypeId: '',
          areaWayId: '',
          areaTownId: '',
          areaCityId: '',
          areaCountyId: ''
        },
        checkedAll: '', // 锚点列表：批量选择
        multipleSelection: [], // 锚点列表：批量选择项
        pageSize: 5, // 锚点列表：每页显示数据量
        currentPage: 1, // 锚点列表：当前页
        markerType: '', // 当前选中锚点类型
        anchorTypeList: [], // 搜索栏：锚点类型列表
        editPopAnchorTypeList: [], // 模态窗：锚点类型列表
        mapScaleArr: [], // 锚点比例尺列表：后端字典获取
        mapSource: '', // 地图图源信息
        anchorTypeId: '', // 搜索：锚点元素ID
        mapScale: '', // 搜索：锚点比例尺
        /**
         * 日期预设置
         * @type {Object}
         */
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        creator: '', // 搜索项：创建人
        areaWayName: '', // 搜索项：道路
        createBeginDate: '', // 搜索项：创建起始日期
        createEndDate: '', // 搜索项：创建结束日期
        areaWayNameList: [], // 道路列表
        areaTownName: '', // 搜索项：乡镇
        areaTownNameList: [], // 乡镇列表
        areaCountyName: '', // 搜索项：区县
        areaCountyNameList: [], // 区县列表
        areaCityName: '', // 搜索项：城市
        areaCityNameList: [], // 城市列表
        markserList: [], // 锚点列表数据
        searchRoadFn: function () {}, // 搜索道路函数
        searchStreetFn: function () {}, // 搜索街道函数
        searchCityFn: function () {}, // 搜索城市函数
        searchCountyFn: function () {}, // 搜索区县
        isLoadingSearch: false, // loading标记
        markerTypeMsg: {}, // 锚点元素类 信息
        hasRelation: [] // 已关联的数据表
      }
    },
    watch: {
      /**
       * 表单：每页显示数量
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-28
       * @param      {String}   cur [description]
       * @param      {String}   old [description]
       */
      pageSize (cur, old) {
        this.handleCurrentChange()
      },
      /**
       * 表单：选中所有
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-28
       * @param      {String}   cur [description]
       */
      checkedAll (cur) {
        if (cur) {
          this.markserList.forEach(v => {
            this.$refs.markersTable.toggleRowSelection(v)
          })
        } else {
          this.$refs.markersTable.clearSelection()
        }
      },
      /**
       * 锚点类型 获取锚点元素列表
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-28
       * @param      {String}   cur [description]
       */
      markerType (cur) {
        this.anchorTypeId = ''
        this.anchorTypeListSearch(cur) // cur = 2d / 3d / 2d 3d  (eg: cur为2d，则获取2d锚点类型)
      }
    },
    methods: {
      /**
       * 添加标注
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-28
       */
      addMarkerFn () {
        this.popType = 'add' // 弹窗类型：添加
        this.editPop = true
        this.detailPop = false
        this.editPopAnchorTypeList = []
        /**
         * 初始化 锚点编辑信息。（不改变对象）
         * @author chend(cdhahaha@163.com)
         * @createDate 2018-09-28
         * @param      {[type]}   let i             in this.editData [description]
         * @return     {[type]}       [description]
         */
        for (let i in this.editData) {
          if (this.editData.hasOwnProperty(i)) {
            this.editData[i] = ''
          }
        }
      },
      /**
       * 关联 监控
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-28
       * @param      {Object}   e 选中的锚点信息
       */
      linkVideo (e) {
        var linkUrl
        e.relationIsPopUp = this.markerTypeMsg[e.anchorTypeId].relationIsPopUp
        e.relationUrl = this.markerTypeMsg[e.anchorTypeId].relationUrl
        e.relationWindowHeight = this.markerTypeMsg[e.anchorTypeId].relationWindowHeight
        e.relationWindowWidth = this.markerTypeMsg[e.anchorTypeId].relationWindowWidth
        console.log('relationUrl', e)
        /**
         * 初始化关联地址
         * @type {[type]}
         */
        this.linkUrlFormat({
          anchorId: e.anchorId,
          relationUrl: e.relationUrl,
          relationWindowHeight: e.relationWindowHeight,
          relationWindowWidth: e.relationWindowWidth,
          relationIsPopUp: e.relationIsPopUp
        })
      },
      /**
       * 预览 监控
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-28
       * @param      {Object}   e 选中的锚点信息
       */
      previewVideo (e) {
        var previewUrl
        e.entranceIsPopUp = this.markerTypeMsg[e.anchorTypeId].entranceIsPopUp
        e.entranceUrl = this.markerTypeMsg[e.anchorTypeId].entranceUrl
        e.entranceWindowHeight = this.markerTypeMsg[e.anchorTypeId].entranceWindowHeight
        e.entranceWindowWidth = this.markerTypeMsg[e.anchorTypeId].entranceWindowWidth
        console.log('entranceUrl', this.markerTypeMsg[e.anchorTypeId].entranceUrl)
        this.previewUrlFormat({
          relationBusinessData: e.relationBusinessData,
          entranceUrl: e.entranceUrl,
          entranceWindowHeight: e.entranceWindowHeight,
          entranceWindowWidth: e.entranceWindowWidth,
          entranceIsPopUp: e.entranceIsPopUp
        })
      },
      /**
       * 预览地址 格式化
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-28
       * @param      {String}   options.relationBusinessData 预览id
       * @param      {String}   options.entranceUrl          预览地址（管理后台设置，相同锚点元素类型具有相同地址格式）
       * @param      {String}   options.entranceWindowHeight 窗口高度
       * @param      {String}   options.entranceWindowWidth  窗口宽度
       */
      previewUrlFormat ({entranceIsPopUp, relationBusinessData, entranceUrl, entranceWindowHeight, entranceWindowWidth}) {
        var accessToken = window.localStorage.getItem('accessToken')
        var accessTokenKey = window.localStorage.getItem('accessTokenKey')
        var clientId = window.localStorage.getItem('clientId')
        entranceUrl = entranceUrl.replace('${id}', relationBusinessData)
        this.openWindow(entranceUrl, entranceWindowHeight, entranceWindowWidth, entranceIsPopUp)
      },
      /**
       * 关联地址格式化
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-28
       * @param      {String}   options.anchorId             锚点Id
       * @param      {String}   options.relationUrl          关联地址（管理后台设置，相同锚点元素类型具有相同地址格式）
       * @param      {String}   options.relationWindowHeight 窗口高度
       * @param      {String}   options.relationWindowWidth  窗口宽度
       */
      linkUrlFormat ({anchorId, relationUrl, relationWindowHeight, relationWindowWidth, relationIsPopUp}) {
        var accessToken = window.localStorage.getItem('accessToken')
        var accessTokenKey = window.localStorage.getItem('accessTokenKey')
        var clientId = window.localStorage.getItem('clientId')
        var replaceStr
        relationUrl = relationUrl.replace(/(\$\{[a-zA-Z]*\})/g, (e) => {
          switch (e) {
            case '${cid}':
            replaceStr = clientId
            break
            case '${ak}':
            replaceStr = accessTokenKey
            break
            case '${token}':
            replaceStr = accessToken
            break
            case '${anchorId}':
            replaceStr = anchorId
            break
            default:
            break
          }
            return replaceStr
          })
        this.openWindow(relationUrl, relationWindowHeight, relationWindowWidth, relationIsPopUp)
      },
      /**
       * 新窗口设置 打开新窗口
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-28
       * @param      {String}   url    窗口地址
       * @param      {Number}   height 窗口高度
       * @param      {Number}   width  窗口宽度
       */
      openWindow (url, height = 500, width = 500, isPop) {
        var iTop = (window.screen.availHeight - 30 - height) / 2
        var iLeft = (window.screen.availWidth - 10 - width) / 2
        var el = this.$refs.iframeLink
        if (isPop === 'F') {
          this.linkFlag = true
          this.iframeSrc = url
          el.height = height
          el.width = width
          return
        }
        window.open(url, "newWindow", `height=${height},width=${width},left=${iLeft},top=${iTop},menubar=0,scrollbars=1,resizable=1,status=1,titlebar=0,toolbar=0,location=1`)
      },
      /**
       * 选择城市后 初始化 区县列表
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-28
       * @param      {String}   e 值
       */
      changeCity (e) {
        this.searchCountyFn('')
        this.editData.areaCountyId = ''
      },
      /**
       * 选择区县后 初始化 乡镇列表
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-28
       * @param      {String}   e 值
       */
      changeCountry (e) {
        this.searchStreet('')
        this.editData.areaTownId = ''
      },
      /**
       * 选择乡镇后 初始化 道路列表
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-28
       * @param      {String}   e 值
       */
      changeStreet (e) {
        this.searchRoadFn('')
        this.editData.areaWayId = ''
      },
      /**
       * 删除选中项
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-28
       */
      deleteAll () {
        console.log('deleteAll', this.multipleSelection)
        this.$confirm('此操作将删除当前锚点, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          closeOnClickModal: false,
          type: 'warning'
        }).then(res => {
          this.$request.anchorPointBatchDelete({anchorIdList: this.multipleSelection.map(v => v.anchorId)}).then(res => {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          this.anchorListSearch()
          }).catch(e => {
            this.$message({
              message: '删除失败，请重试',
              type: 'error'
            })
          })
        }).catch(e => {
        })
      },
      /**
       * 重置搜索项目
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-28
       */
      resetSearch () {
          this.areaCityName = '',
          this.areaCountyName = '',
          this.areaTownName = '',
          this.areaWayName = '',
          this.createEndDate = '',
          this.createBeginDate = '',
          this.creator = '',
          this.mapScale = ''
          this.markerType = ''
      },
      /**
       * 锚点详情模态窗
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-28
       * @param      {Object}   e 当前选择的锚点
       */
      detailBox (e) {
        this.editPop = false
        this.detailPop = true
        this.$request.anchorPointDetailGet(e.anchorId).then(res => {
          this.markerDetail = res
          this.markerDetail['anchorTypeName'] = e.anchorTypeName
          this.markerDetail['creator'] = e.creator
          this.markerDetail['createTime'] = e.createTime
        })
      },
      /**
       * 编辑锚点模态窗
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-28
       * @param      {Object}   e 当前选择的锚点
       */
      editBox (e) {
        this.detailPop = false
        this.editPop = true
        this.popType = 'edit'
        this.editPopAnchorTypeList = []
        this.$request.anchorPointDetailGet(e.anchorId).then(res => {
          this.editData = res
          /**
           * 初始化 城市，乡镇，街道，道路列表
           * @author chend(cdhahaha@163.com)
           * @createDate 2018-09-28
           */
          if (this.editData.areaCityId) {
            this.areaCityNameList = [{
              cityId: res.areaCityId,
              cn: res.areaCityName
            }]
          } else {
            this.areaCityNameList = []
          }
          if (this.editData.areaCountyId) {
            this.areaCountyNameList = [{
              districtId: res.areaCountyId,
              cn: res.areaCountyName
            }]
          } else {
            this.areaCountyNameList = []
          }
          if (this.editData.areaTownId) {
            this.areaTownNameList = [{
              streetId: res.areaTownId,
              cn: res.areaTownName
            }]
          } else {
            this.areaTownNameList = []
          }
          if (this.editData.areaWayId) {
            this.areaWayNameList = [{
              roadId: res.areaWayId,
              roadName: res.areaWayName
            }]
          } else {
            this.areaWayNameList = []
          }
          switch (this.mapSource.areaLevel) {
            case '03':
              if (!this.editData.areaTownId) {
                this.searchStreetFn('')
              }
              break
            case '02':
              if (!this.editData.areaCountyId) {
                this.searchCountyFn('')
              }
              break
            case '01':
              if (!this.editData.areaCityId) {
                this.searchCityFn('')
              }
              break
            default:
              break
          }
          this.editPopAnchorTypeList = [{
            anchorTypeName: e.anchorTypeName,
            anchorTypeId: res.anchorTypeId
          }]
          console.log('editPopAnchorTypeList', this.editData, e.anchorTypeName, this.editPopAnchorTypeList)
        })
      },
      /**
       * 模糊搜索锚点元素类型列表
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-28
       * @param      {String}   value 锚点元素名称
       */
      searchAnchorTypeSearch (value) {
        this.$request.anchorTypeListSearch({
          anchorTypeName: value
        }).then(res => {
          this.editPopAnchorTypeList = res.resultList
        })
      },
      /**
       * 表单：编辑/添加 锚点
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-18
       */
      editForm () {
        console.log('editForm', this.editData)
        var flag = false // 是否缺失 地理信息表单必填项
        switch (this.mapSource.areaLevel) {
          case '01':
          flag = !this.editData.areaCityId
          break
          case '02':
          flag = !this.editData.areaCountyId
          break
          default:
          break
        }
        flag = flag || !this.editData.areaTownId || !this.editData.areaWayId
        if (flag) {
          this.$message({
            type: 'warning',
            message: '请完善锚点地理信息'
          })
          return
        }
        if (this.popType === 'add') {
          if (!this.editData.anchorTypeId || !this.editData.anchorName || !this.editData.longitude || !this.editData.latitude || !this.editData.mapScale) {
            this.$message({
              type: 'warning',
              message: '请填写表单必填项'
            })
          }
          this.$request.anchorAdd(this.editData).then(res => {
            console.log('anchorAdd', res)
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            this.editPop = false
            this.anchorListSearch()
          })
          return
        }
        if (!this.editData.anchorName) {
          this.$message({
            type: 'warning',
            message: '锚点名称不能为空'
          })
        }
        this.$request[`anchorPoint${this.editData.isMapModel3d === 'T' ? '3D':'2D'}Update`](this.editData).then(res => {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
          this.editPop = false
          this.anchorListSearch()
        })
      },
      /**
       * 显示批量添加模态窗
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-28
       */
      showBatchAddPop () {
        this.doneCheck = false
        this.batchAddPop = true
        this.$refs.uploadModel.value = ''
      },
      /**
       * 批量添加锚点：批量检测数据格式
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-28
       */
      batchCheck () {
        this.reqLoading = true
        this.$request.anchorBatchChecked(this.formData).then(res => {
          this.reqLoading = false
          this.doneCheck = true
          this.checkList = res.resultList
          if (this.checkList.length === 0) {
            this.$message({
              message: '校验成功',
              type: 'success'
            })
          }
        }).catch(e => {
          this.reqLoading = false
        })
      },
      /**
       * 批量添加锚点：添加模板文件
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-28
       */
      batchAdd () {
        this.$refs.uploadModel.click()
      },
      /**
       * 批量添加锚点：批量添加
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-28
       * @return     {[type]}   [description]
       */
      batchAddForm () {
        this.reqLoading = true
        this.$request.anchorBatchAdd(this.formData).then(res => {
          this.$message({
            message: '批量添加成功',
            type: 'success'
          })
          this.reqLoading = false
          this.anchorListSearch()
          this.$refs.uploadModel.value = ''
          this.doneCheck = false
          this.batchAddPop = false
        }).catch(e => {
          this.reqLoading = false
        })
      },
      /**
       * 批量添加锚点：上传模板文件
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-28
       * @param      {Object}   e input[file]触发的event
       */
      uploadModel (e) {
        var file = e.target.files[0]
        var ak = window.localStorage.getItem('accessTokenKey') || ''
        var at = window.localStorage.getItem('accessToken') || ''
        this.doneCheck = false
        this.fileName = file.name
        this.formData = new FormData()
        this.formData.append('ct', '{}')
        this.formData.append('file', file)
        this.$refs.uploadModel.value = ''
      },
      /**
       * 删除锚点
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-19
       */
      deleteBox (e) {
        this.$confirm('此操作将删除当前锚点, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          closeOnClickModal: false,
          type: 'warning'
        }).then(res => {
          this.$request.anchorPointDelete(e.anchorId).then(res => {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          this.anchorListSearch()
          }).catch(e => {
            this.$message({
              message: '删除失败，请重试',
              type: 'error'
            })
          })
        }).catch(e => {
        })
      },
      /**
       * 表单选择
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-19
       * @param      {Array}   e 选中数组
       */
      handleSelectionChange (e) {
        this.multipleSelection = e
      },
      /**
       * 锚点列表：改变页码
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-28
       * @param      {String}   e 页码
       */
      handleCurrentChange (e) {
        this.currentPage = parseInt(e) || this.currentPage
        this.anchorListSearch()
      },
      /**
       * 锚点类型搜索
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-14
       * @param      {String}   type  根据锚点类型 2d或者3d或者all 获取锚点类型
       */
      anchorTypeListSearch (type) {
        this.$request.anchorTypeListSearch({
          mapModel2d: (type === 'all' || type === '2d') ? 'T' : 'F',
          mapModel3d: (type === 'all' || type === '3d') ? 'T' : 'F'
        }).then(res => {
          this.anchorTypeList = res.resultList
        })
      },
      /**
       * 日期格式化
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-28
       * @param      {Date}   date 日期
       * @return     {String} yyyy-mm-dd
       */
      dateFormat (date) {
        if (!date) {
          return
        }
        var years = date.getFullYear()
        var month = date.getMonth() + 1
        var day = date.getDate()
        return years + '-' +  (month > 9 ? month : `0${month}`) + '-' + (day > 9 ? day : `0${day}`)
      },
      /**
       * 获取锚点列表数据
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-14
       */
      anchorListSearch () {
        var params = {
          areaCityName: this.areaCityName,
          areaCountyName: this.areaCountyName,
          areaTownName: this.areaTownName,
          areaWayName: this.areaWayName,
          createBeginDate: this.createBeginDate,
          createEndDate: this.createEndDate,
          creator: this.creator,
          mapScale: this.mapScale,
          page: this.currentPage,
          pageSize: this.pageSize,
          anchorTypeId: this.anchorTypeId
        }
        console.log('params', params)
        if (this.markerType) {
          var isMapModel2d = (this.markerType === 'all' || this.markerType === '2d') ? 'T' : 'F'
          var isMapModel3d = (this.markerType === 'all' || this.markerType === '3d') ? 'T' : 'F'
          if (isMapModel2d) {
            params['isMapModel2d'] = isMapModel2d
          }
          if (isMapModel3d) {
            params['isMapModel3d'] = isMapModel3d
          }
        }
        this.loadingMarkersTable = true
        this.$request.anchorSearchList(params).then(res => {
          this.markserList = res.recordList.map(v => {
            v.anchorStatusType = `${(v.isMapModel2d === 'T' ? '2D' : '') + ' ' + (v.isMapModel3d === 'T' ? '3D' : '')}`
            v.anchorStatusType = v.anchorStatusType ? v.anchorStatusType : '未设置'
            v.anchorName = v.anchorName || '未命名'
            v.mapScale = v.mapScale || '未设置'
            v.relationUrl = this.hasRelation[v.anchorTypeId]
            return v
          })
          this.totalCount = res.totalCount
          this.loadingMarkersTable = false
          console.log(res)
        })
      },
      /**
       * 获取锚点比例尺数据字典
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-14
       */
      getMapScaleList () {
        this.$request.dictDetailList({dictCode: 'MAP_SCALE'}).then(dicRes => {
          this.mapScaleArr = dicRes
        })
      },
      /**
       * 获取图源信息
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-19
       */
      getMapSource () {
        this.$request.getMapsourceArea().then(res => {
          if (!res.areaLevel) {
            res.areaLevel = '01'
          }
          this.mapSource = res
        })
      },
      /**
       * 搜索道路
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-19
       * @param      {String}   e [description]
       */
      searchRoad (e) {
        var params = {cn: e}
        if (!this.editData.areaTownId) {
          return this.$message({
            message: '搜索不到数据，请按顺序填写',
            type: 'warning'
          })
          this.areaWayNameList = []
        }
        params['streetId'] = this.editData.areaTownId
        this.isLoadingSearch = true
        this.$request.metaDataRoadListGet(params)
          .then(res => {
            this.isLoadingSearch = false
            this.areaWayNameList = res
          })
      },
      /**
       * 搜索街道、城镇
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-19
       * @param      {String}   e [description]
       */
      searchStreet (e) {
        var districtId = this.mapSource.countyId || this.editData.areaCountyId
        if (!districtId) {
          return this.$message({
            message: '搜索不到数据，请按顺序填写',
            type: 'warning'
          })
          this.areaTownNameList = []
        }
        this.isLoadingSearch = true
        this.$request.metadataStreetListGet({cn: e, districtId})
          .then(res => {
            this.isLoadingSearch = false
            this.areaTownNameList = res
          })
      },
      /**
       * 搜索市
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-19
       * @param      {String}   e [description]
       */
      searchCity (e) {
        this.isLoadingSearch = true
        this.$request.metadataCityListGet({cn: e, provinceId: this.mapSource.provinceId})
          .then(res => {
            this.isLoadingSearch = false
            this.areaCityNameList = res
          })
      },
      /**
       * 搜索区县
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-19
       * @param      {String}   e [description]
       */
      searchCounty (e) {
        var cityId = this.mapSource.cityId || this.editData.areaCityId
        if (!cityId) {
          return this.$message({
            message: '搜索不到数据，请按顺序填写',
            type: 'warning'
          })
          this.areaCountyNameList = []
        }
        this.isLoadingSearch = true
        this.$request.metadataDistrictListGet({cn: e, cityId})
          .then(res => {
            this.isLoadingSearch = false
            this.areaCountyNameList = res
          })
      },
      /**
       * 去抖初始化
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-28
       */
      throttleInit () {
        this.searchRoadFn = this.$utils.throttle(this.searchRoad, 200)
        this.searchStreetFn = this.$utils.throttle(this.searchStreet, 200)
        this.searchCityFn = this.$utils.throttle(this.searchCity, 200)
        this.searchCountyFn = this.$utils.throttle(this.searchCounty, 200)
      },
      /**
       * 获取锚点元素列表数据
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-28
       * @return     {Object}   锚点元素类型数据（用于锚点关联预览地址，关联预览需参照 后台地址格式 设置）
       */
      async anchorTypeListGet () {
        await this.$request.anchorType2DListGet().then(res => {
          res.recordList.forEach(v => {
            if (!this.markerTypeMsg[v.anchorTypeId]) {
              this.markerTypeMsg[v.anchorTypeId] = v
            }
            if (v.relationUrl) {
              this.hasRelation[v.anchorTypeId] = v.relationUrl
            }
          })
        })
        await this.$request.anchorType3DListGet().then(res => {
          res.recordList.forEach(v => {
            if (!this.markerTypeMsg[v.anchorTypeId]) {
              this.markerTypeMsg[v.anchorTypeId] = v
            }
            if (v.relationUrl) {
              this.hasRelation[v.anchorTypeId] = v.relationUrl
            }
          })
        })
        return this.hasRelation
      },
      /**
       * webSocket监听
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-28
       */
      onWebSocket () {
        window.webSocket.onopen = (e) => {
          console.log('webSocketChend', e)
        }
        window.webSocket.onmessage = (e) => {
          var data = JSON.parse(e.data)
          console.log('webSocketChend11111', e, data.isBindSuccess)
          if (data.isBindSuccess === 'true') {
            this.$message({
              message: '关联成功',
              type: 'success'
            })
            this.anchorListSearch()
          } else {
            this.$message({
              message: '关联失败，请重试',
              type: 'warning'
            })
          }
        }
      },
      /**
       * 初始化
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-17
       */
      init () {
        this.getMapScaleList() // 获取地图比例尺列表
        this.getMapSource() // 获取图源信息
        this.anchorTypeListGet().then(res => {
          this.anchorListSearch() // 初始化：获取所有类型的锚点列表数据
        })
        this.throttleInit() // 地理信息搜索函数初始化
        this.onWebSocket() // websocket 监听
      }
    },
    mounted () {
      this.init()
    }
  }
</script>
<style ref="stylesheet/less" lang="less">
  .batchManage {
    @inputHeight: 30px;
    @fontSize: 14px;
    width: 100%;
    overflow: auto;
    /* .msgBoxWrapBox {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 10;
      .msgBoxWrapBg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9;
        background-color: rgba(0, 0, 0, 0.6);
      }
    } */
    .downloadFileBtn {
      float: right;
      padding: 0;
      .goDownload {
        line-height: 36px;
        color: #fff;
        text-decoration: none;
        padding: 10px 20px;
      }
    }
    .checkStatus {
      margin-left: 10px;
      font-size: 16px;
    }
    .checkSuccess {
      color: #67C23A;
    }
    .checkError {
      color: #E6A23C;
    }
    .batchAddPopFileName {
      margin-top: 15px;
      font-size: 14px;
      background: rgba(189, 189, 184, 0.12);
      padding: 10px 15px;
      color: #409eff;
      .tipMsg {
        padding: 10px;
        color: #F56C6C;
      }
      .batchAddPopUl {
        list-style: none;
        color: #606266;
        .batchAddPopli {
          padding: 5px 0;
          em {
            font-style: normal;
            color: #409eff;
            padding: 0 2px;
          }
        }
      }
    }
    .msgBoxWrap {
      position: absolute;
      z-index: 10;
      background-color: #182739;
      border: 1px solid #13a9e9;
      top: 10%;
      left: 50%;
      margin-left: -320px;
      border-radius: 5px;
      width: 640px;
      .el-loading-mask {
        background-color: rgba(255, 255, 255, 0.3);
      }
      .msgBoxTitle {
        background: url('../../../assets/images/msgBoxTitle.png') center no-repeat;
        background-size: cover;
        height: 40px;
        line-height: 40px;
        padding-left: 15px;
        font-size: 16px;
        color: #fff;
      }
      .msgBoxContent {
        float: left;
        padding: 20px;
        ul {
          float: left;
          list-style: none;
        }
        .editDataLi {
          width: 100%;
          float: left;
          margin: 8px 0;
          .showValue {
            float: left;
            width: 150px;
            color: #77797c;
            font-size: 15px;
            line-height: 30px;
          }
          .editAddressBlock {
            float: left;
            margin: 5px 0;
            .editRight {
              margin-left: 30px;
              width: 70px;
            }
            .el-input {
              width: 150px;
              .el-input__inner {
                width: 150px;
              }
            }
          }
          .editAddressBlockWidth100 {
            width: 100%;
          }
          .editLabel {
            display: block;
            float: left;
            height: 30px;
            line-height: 30px;
            width: 120px;
            font-size: 15px;
            color: #fff;
            margin-right: 20px;
          }
          .requiredLabel {
            &:before {
              content: '*';
              color: #ff3452;
              padding-right: 5px;
            }
          }
          .el-textarea {
            width: 300px;
          }
          .el-input {
            width: 300px;
          }
          .editPositionLabel {
            line-height: 80px;
            height: 80px;
          }
          .editPositionLabel3d {
            line-height: 120px;
            height: 120px;
          }
          .editPosition {
            float: left;
            width: 300px;
            .editPositionBlock {
              float: left;
              height: 40px;
              .showValue {
                margin-top: 5px;
              }
              .colorSet {
                color: #77797c!important;
              }
              .editLabelx, .editLabely {
                float: left;
                display: block;
                width: 40px;
                line-height: 30px;
                margin-top: 5px;
                color: #fff;
              }
              .el-input {
                float: left;
                width: 260px;
                margin-top: 5px;
                .el-input__inner {
                  width: 100%;
                }
              }
            }
          }
          .el-textarea__inner {
            width: 300px;
          }
          .el-input__inner {
            width: 300px;
            height: 30px;
            line-height: 30px;
          }
          .biliChi {
            width: 200px;
          }
        }
        .biliWrap {
          height: 60px;
          .el-select {
            margin-top: 20px;
            .el-input__suffix {
              top: 0;
            }
            .el-input__icon {
              line-height: 30px;
              height: 30px;
            }
          }
        }
      }
      .editBtn {
        width: 300px;
        margin: 0 auto;
        button {
          margin-top: 20px;
          margin-bottom: 30px;
        }
      }
      .btnCenter {
        width: 108px;
        margin: 0 auto;
        button {
          margin-top: 20px;
          margin-bottom: 30px;
        }
      }
    }
    .msgBoxWrap1 {
      top: 40%;
      left: 60%;
    }
    .btn-group {
      .left {
        float: left;
        color: #fff;
        padding: 10px 40px;
        margin-right: 60px;
        background: -webkit-linear-gradient(left, #088eec, #17b3e7) !important;
        /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, #088eec, #17b3e7) !important;
        /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, #088eec, #17b3e7) !important;
        /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #088eec, #17b3e7) !important;
        /* 标准的语法（必须放在最后）*/
        border: none;
      }
      .right {
        float: left;
        color: #fff;
        padding: 10px 40px;
        background: none; 
        border: 1px solid #5390a3;
        margin-left: 0;
      }
    }
    .searchForm {
      float: left;
      width: 94%;
      margin-left: 3%;
      border-bottom: 1px solid #125e96;
      .el-input {
        width: 150px;
        .el-icon-arrow-up {
          color: #6ba9f9;
          line-height: 30px;
          height: 30px;
        }
      }
      .el-range-separator {
        .el-icon-time {
          line-height: @inputHeight;
        }
      }
      .width100 {
        .el-input {
          width: 100px;
        }
      }
      .el-input__inner {
        height: 30px;
        line-height: @inputHeight
      }
      .createTime {
        .el-input__icon {
          height: 60px;
        }
        .el-range-separator {
          line-height: 24px;
        }
      }
      .searchUl {
        float: left;
        list-style: none;
        padding: 30px 0 50px 50px;
        .searchLi {
          float: left;
          padding: 15px 70px 15px 0;
          .searchLabel {
            display: block;
            float: left;
            color: #fff;
            width: 90px;
            line-height: @inputHeight;
            font-size: @fontSize;
          }
          .width40 {
            width: 40px;
          }
          .width60 {
            width: 60px;
          }
          .width110 {
            width: 110px;
          }
        }
        .timeSelect {
          .timeSelectLabel {
            color: #fff;
            padding: 0 10px;
          }
          .el-icon-date {
            height: 30px;
            line-height: 30px;
            color: #6ba9f9;
          }
          .el-input__prefix {
            left: auto;
            right: 0;
            top: 0;
            padding-left: 0;
          }
          .el-input__inner {
            padding-left: 15px;
          }
        }
        .newBlock {
          clear: both;
        }
      }
    }
    .markersformData {
      float: left;
      width: 94%;
      margin-left: 3%;
      margin-top: 25px;
      .tableWrap {
        .tableSelectAll {
          margin: 14px;
          .selectAllBtn {
            margin-left: 25px;
            margin-right: 20px;
            color: #fff;
          }
          .deleteBtn {
            color: #8f9399;
            font-size: 14px;
            cursor: pointer;
          }
        }
      }
      .addShu {
        &:before {
          display: block;
          content: '|';
          position: absolute;
          left: 50%;
          margin-left: -2px;
        }
      }
      .el-table {
        .el-button--text, .el-button--text:focus, .el-button--text:hover {
          color: #00ffff;
        }
        th {
          background-color: #1d3959;
          color: #fff;
          border: none;
        }
        td {
          border: none;
        }
        tr {
          background-color: #1b2d40;
          color: #fff;
        }
        &::before {
          height: 0;
        }
        .el-loading-mask {
          background-color: rgba(0, 0, 0, 0.3);
        }
      }
      .el-table__body {
        border: none;
      }
      .el-table--enable-row-hover .el-table__body tr:hover > td {
        background-color: #0b2843;
        color: #fff;
      }
      .el-table tr.el-table__row--striped {
        td {
          background-color: #1d3959;
          color: #fff;
        }
      }
      .el-checkbox__inner {
        background-color: transparent;
      }
    }
    .addMarkers {
      float: right;
      margin: 50px 3% 20px 0;
      .left {
        margin-right: 35px;
      }
      .hideMe {
        display: none;
      }
    }
    .paginationWrap {
      float: right;
      margin:40px 0 20px 0;
      .paginationWrapPageSize {
        float: left;
        color: #657b8d;
        line-height: 28px;
        margin-right: 20px;
        input {
          width: 22px;
          padding: 0 3px;
          background-color: transparent;
          border: 1px solid #657b8d;
          text-align: center;
          -moz-appearance: textfield;
          line-height: normal;
          margin: 0 5px;
          color: #00ffff;
          height: 18px;
        }
      }
      .pageBotton {
        float: left;
        .el-pagination__jump {
          color: #657b8d;
        }
        .el-pagination__editor {
          .el-input__inner {
            border-color: #657b8d;
            background-color: transparent;
            width: 80%;
            height: 20px;
            color: #657b8d;
            border-radius: 0;
          }
        }
        .el-pager {
          >li {
            background: transparent;
            color: #657b8d;
            min-width: 0;
            margin: 0 3px;
          }
          .active {
            color: #00ffff;
            border-bottom: 1px solid  #00ffff;
          }
        }
        .btn-prev {
          padding-right: 5px;
          background-color: transparent;
          color: #657b8d;
          .el-icon-arrow-left {
            &:before {
              content: '上一页'
            }
          }
        }
        .btn-next {
          color: #657b8d;
          padding-left: 5px;
          background-color: transparent;
          .el-icon-arrow-right {
            &:before {
              content: '下一页'
            }
          }
        }
      }
    }
  }
  .batchManageBox {
    position: relative;
    width: 100%;
    background: url('../../../assets/images/bg.jpg');
    background-size: cover;
    .batchManageWrap {
      position: absolute;
      height: 100%;
      overflow-y: auto;
    }
  }
</style>
